<template>
  <div class="demo-image">
    <div class="block">
      <!-- <span class="demonstration">{{ fit }}</span> -->
      <div>
        <el-image v-if="isHashIcon" class="icon" :src="props.formData.icon" />
        <div
          class="word-image"
          :style="{ 'background-color': backgroundColor }"
          v-else
        >
          <div class="text">
            {{ props.iconWord ? props.iconWord : '默认标题' }}
          </div>
        </div>
        <div>当前图标</div>
      </div>
      <div>
        <div
          class="word-image"
          :style="{ 'background-color': backgroundColor }"
          @click="wordIconClick"
        >
          <div class="text">
            {{ props.iconWord ? props.iconWord : '默认标题' }}
          </div>
        </div>
        <!-- <el-image class="icon" :src="url" /> -->
        <div>文字图标</div>
      </div>
      <div>
        <UploadVue class="icon"></UploadVue>
        <div>上传</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import UploadVue from '../upload/UploadVue.vue'
import emitter from '../../../mitt'
import { onUnmounted, ref } from 'vue'
const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
const url =
  'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

const emit = defineEmits(['imageSubmit'])
const imageSubmit = () => {
  emit('imageSubmit', url)
}
const props = defineProps({
  formData: {
    type: Object,
    default: {},
  },
  iconWord: {
    type: String,
    default: '',
  },
})
console.log('图片组件', props.formData.icon)
let isHashIcon = props.formData.icon ? ref(true) : ref(false)

// 文字图标的逻辑
const backgroundColor = ref('')
emitter.on('pickedEvent', (color) => {
  console.log(color)
  backgroundColor.value = color
})
onUnmounted(() => {
  emitter.off('pickedEvent', () => {})
})
const wordIconClick = () => {
  isHashIcon.value = false
}
</script>

<style scoped>
.icon {
  width: 60px;
  height: 60px;
  border: 1px;
  box-sizing: border-box;
  /* padding: 5px; */
  margin: 5px 10px;
  border-radius: 10px;
}

.demo-image .block {
  border: solid 1px var(--el-border-color);
  display: flex;

  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}
.word-image {
  width: 60px;
  height: 60px;
  background-color: #ccc;
  box-sizing: border-box;
  text-align: center;
  line-height: 60px;
  margin: 5px 10px;
  border-radius: 10px;
}
.word-image .text {
  display: inline-block;
  height: auto;
  line-height: 1.6;
  color: #fff;
  vertical-align: middle;
}
.active {
  border: solid 3px rgb(22, 129, 255);
}
</style>
